<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Demo - Catálogo de Cursos</title>
	<link rel="stylesheet" href="resources/css/normalize.css">
	<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
	<script type="text/x-handlebars" data-template-name="application">
    	{{partial 'header'}}
    	{{outlet}}   
    	{{partial 'footer'}}
	</script>

	<script type="text/x-handlebars" data-template-name="_header">
		<header>
			<h1>{{#linkTo index}}Catálogo de Cursos{{/linkTo}}</h1>
		</header>
		<hr/>
	</script>

	<script type="text/x-handlebars" data-template-name="_footer">
		<br/>
		<hr/>
		<footer align="right">
			&copy;2013 Carlos Alonso González
		</footer>
	</script>
	
	<script type="text/x-handlebars" data-template-name="cursos">
		<h2>LISTADO DE CURSOS</h2>
		{{#linkTo cursos.new}}Nuevo{{/linkTo}}

		<center>
		<table border="1" cellspacing="0" cellpadding="5" width="80%">
			<thead>
				<tr>
					<th>
						{{#view App.SorterView column='de_titulo'}}
							<a href="#">Título</a>
						{{/view}}
					</th>
					<th width="100">
						{{#view App.SorterView column='de_nivel'}}
							<a href="#">Nivel</a>
						{{/view}}
					<th width="50">
						{{#view App.SorterView column='nu_horas'}}
							<a href="#">Horas</a>
						{{/view}}
					<th width="50">Temario</th>
					<th width="50"></th>
				</tr>
			</thead>
			<tbody>
				{{#unless model}}
					<tr>
						<td colspan="5" align="center">No hay ningún curso activo</td>
					</tr>
				{{else}}
					{{#each model}}
						<tr>
							<td>{{titulo}}</td>
							<td>{{nivel}}</td>
							<td>{{horas}}</td>
							<td align="center">
								{{#if temario}}
									{{#view App.ClickableView contentBinding='this'}}
										<a href="#">Descargar</a>
									{{/view}}
								{{/if}}
							</td>
							<td align="center">
								{{#linkTo cursos.edit this}}Editar{{/linkTo}}
							</td>
						</tr>
					{{/each}}
				{{/unless}}				
			</tbody>
		</table>
		</center>
	</script>
	
	<script type="text/x-handlebars" data-template-name="cursos/new">
		{{partial 'cursos/form'}}
	</script>
	
	<script type="text/x-handlebars" data-template-name="cursos/edit">
		{{partial 'cursos/form'}}
	</script>
	
	<script type="text/x-handlebars" data-template-name="cursos/_form">
		<h2>EDICIÓN CURSO</h2>

		<table cellspacing="5" cellpadding="5">
		<tr>
			<td align="right">Activo</td>
			<td>{{view Ember.Checkbox checkedBinding='activo'}}</td>
		</tr>	
		<tr>
			<td align="right">Profesor</td>
			<td>
				{{view Ember.Select
                    contentBinding='controller.tutores'
					optionValuePath='content.id'
  					optionLabelPath='content.nombreCompleto'
					selectionBinding='tutor'
                    prompt='Seleccione un tutor'
				}}
			</td>
		</tr>
		<tr>
			<td align="right">Título</td>
			<td>{{view Ember.TextField valueBinding='titulo'}}</td>
		</tr>
		<tr>
			<td align="right">Nivel</td>
			<td>
				{{view Ember.Select 
					contentBinding='App.niveles'
					valueBinding='nivel'
                    prompt='Seleccione el nivel'}}
			</td>
		</tr>
		<tr>
			<td align="right">Horas</td>
			<td>{{view Ember.TextField min='0' max='500' class='numeric' type='number' valueBinding='horas'}}</td>
		</tr>
		<tr>
			<td align="right">Temario</td>
			<td>{{view App.UploadFileView name='temario' contentBinding='content'}}</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<button {{action save}}>Guardar</button>
				<button {{action cancel}}>Cancelar</button>
			</td>
		</tr>
		</table>
	</script>
	
	<script src="resources/js/libs/jquery-1.9.1.js"></script>
	<script src="resources/js/libs/handlebars-1.0.0-rc.3.js"></script>
	<script src="resources/js/libs/ember-1.0.0-rc.3.js"></script>
	<script src="resources/js/libs/ember-data-1.0.0-rc.3.js"></script>
	<script src="resources/js/libs/jquery.numeric.js"></script>
	
	<script src="resources/js/app.js"></script>
	<script src="resources/js/datastore.js"></script>
	<!-- <script src="resources/js/datastore-test.js"></script> -->
	<script src="resources/js/controllers.js"></script>
	<script src="resources/js/models.js"></script>
	<script src="resources/js/routes.js"></script>
	<script src="resources/js/views.js"></script>
</body>
</html>